{extend name="default/base/base_home" /}
{block name="mall_main"}
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/member_o2o_errand.css">
<style>
    .member_o2o_errand_send .create-content .user-weight input{width: 100%;text-align: center;}
    .member_o2o_errand_send .create-content .user-sel-type{width:305px}
    .member_o2o_errand_send .create-content .goods-m{width:292px}
    .member_o2o_errand_send .create-content .select-weight{width:305px}
    .member_o2o_errand_send .create-content .sel-time{width:305px}
    .member_o2o_errand_send .create-content .appoint-hours{width:50%}
    .member_o2o_errand_send .create-content .appoint-minutes{width:50%}
</style>
<form id='member_o2o_errand_form' action='{:url("MemberO2oFuwuOrder/add")}'>
    <div class="member_o2o_errand_send">
        <div class="create-content clearfloat">
            <div class="create-left-con">
                <div class="user-mess">
                    <div class="user-mess-title clearfloat">
                        <h3 class="fl">服务地址</h3>
                        <a class="href-look tar-explanation" href='javascript:getAddress()'>设置</a>
                    </div>
                    <div class="user-mess-con">

                        <div class="user-from-detail clearfloat">
                            <div class="user-trip">
                                详细地址
                            </div>
                            <div class="user-from-input">
                                <input type='hidden' name='address_id' id='address_id' value="{$address_info.address_id|default=''}" />
                                <input readonly class="cus-input" type="text" placeholder="请输入单元、楼层、门牌号" id='o2o_fuwu_order_address' value="{$address_info.address_detail|default=''}" />
                            </div>
                        </div>
                        <div class="user-from-mess clearfloat">
                            <div class="user-trip">
                                姓名

                            </div>
                            <div class="user-from-name">
                                <input readonly class="cus-input" type="text" placeholder="请输入姓名" id='o2o_fuwu_order_name' value="{$address_info.address_realname|default=''}" />
                            </div>
                            <div class="user-trip f-tel">
                                手机号

                            </div>
                            <div class="user-from-name">
                                <input readonly class="cus-input" maxlength="11" type="tel" placeholder="请输入手机号" id='o2o_fuwu_order_phone' value="{$address_info.address_mob_phone|default=''}" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user-mess">
                    <div class="user-mess-title">
                        <h3>服务信息</h3>
                    </div>
                    <div class="user-goods clearfloat">
                        <div class="goods-type clearfloat">
                            <div class="user-trip">
                                默认服务
                                <span>（必填）</span>
                            </div>
                            <div class="cus-select user-sel-type f">
                                <div class="goods-m type-m select-weight-btn" onclick='openGoods()'>
                                    <div>
                                        <input class="goods-input" readonly="" placeholder="选择默认服务" id="default_spec_info" value="{$o2o_fuwu_goods_spec_default[0]['o2o_fuwu_goods_spec_name']}（{$o2o_fuwu_goods_spec_default[0]['o2o_fuwu_goods_spec_price']}元/{$o2o_fuwu_goods_spec_default[0]['o2o_fuwu_goods_spec_unit']}）" /> 
                                        <i class="iconfont">&#xe689;</i>
                                    </div>
                                </div>
                                <div class="select-weight select-block" id='goods_list'>
                                    <div class="select-weight-con">
                                        <ul>
                                            {foreach name='o2o_fuwu_goods_spec_default' item='spec'}
                                            <li onclick='selectGoods({:json_encode($spec,JSON_UNESCAPED_UNICODE)})'>
                                                <a href="javascript:;">{$spec.o2o_fuwu_goods_spec_name}（{$spec.o2o_fuwu_goods_spec_price}元/{$spec.o2o_fuwu_goods_spec_unit}）</a>
                                            </li>
                                            {/foreach}
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="user-edit-weight f">
                                <div class="weight-subtraction" onclick="changeWeight(0,'-')">
                                    <i class="iconfont">&#xe6dc;</i>
                                </div>
                                <div class="user-weight f">
                                    <input type="number" id="quantity_0" value="1" />
                                </div>
                                <div class="weight-add" onclick="changeWeight(0,'+')">
                                    <i class="iconfont">&#xe6db;</i>
                                </div>
                            </div>
                        </div>
                        {if !empty($o2o_fuwu_goods_spec_added)}
                        {foreach name='o2o_fuwu_goods_spec_added' item='spec' key='index'}
                        <div class="goods-type clearfloat">
                            <div class="user-trip">
                                {if $index==0}增值服务{else}&nbsp;{/if}
                            </div>
                            <div class="cus-select user-sel-type f">
                                <div class="goods-m type-m select-weight-btn">
                                    <div>
                                        <input class="goods-input" readonly="" value="{$spec['o2o_fuwu_goods_spec_name']}（{$spec['o2o_fuwu_goods_spec_price']}元/{$spec['o2o_fuwu_goods_spec_unit']}）" /> 
                                    </div>
                                </div>
                            </div>
                            <div class="user-edit-weight f">
                                <div class="weight-subtraction" onclick="changeWeight({$index}+1,'-')">
                                    <i class="iconfont">&#xe6dc;</i>
                                </div>
                                <div class="user-weight f">
                                    <input type="number" id="quantity_{$index+1}" value="0" />
                                </div>
                                <div class="weight-add" onclick="changeWeight({$index}+1,'+')">
                                    <i class="iconfont">&#xe6db;</i>
                                </div>
                            </div>
                        </div>
                        {/foreach}
                        {/if}
                        <div class="goods-times clearfloat">
                            <div class="user-trip">
                                预约时间
                            </div>


                            <div class="cus-select user-sel-type f" id="select_time_wrapper">
                                <div class="select-weight-btn goods-m time-m" onclick="openTime()">
                                    <div>
                                        <input type='hidden' name='o2o_fuwu_order_appointment_time' id='o2o_fuwu_order_appointment_time' value="" />
                                        <span id="appointment_time"><span style='color:#ccc'>请选择预约时间</span></span>
                                        <i class="iconfont">&#xe689;</i>
                                    </div>
                                </div>
                                <div class="sel-time select-block" id="time_list">
                                    <div class="sel-time-main">
                                        <div class="add-time clearfloat">
                                            <div class="add-hours" onclick='changeHour("-")'>
                                                <i class="iconfont">&#xe688;</i>
                                            </div>
                                            <div class="add-minutes" onclick='changeMinute("-")'>
                                                <i class="iconfont">&#xe688;</i>
                                            </div>
                                        </div>
                                        <div class="appoint-time clearfloat">
                                            <div class="appoint-hours" id="appoint-hours" data-value="{:strtotime(date('Y-m-d',TIMESTAMP))}" data-start="{:strtotime(date('Y-m-d',TIMESTAMP))}">
                                                {:date('m月d日',TIMESTAMP)}（{$week_array[date('w',TIMESTAMP)]}）
                                            </div>
                                            <div class="appoint-point">
                                                
                                            </div>
                                            <div class="appoint-minutes" id="appoint-minutes" data-value="28800">
                                                上午
                                            </div>
                                        </div>
                                        <div class="subtraction-time clearfloat">
                                            <div class="sub-hours" onclick='changeHour("+")'>
                                                <i class="iconfont">&#xe689;</i>
                                            </div>
                                            <div class="sub-minutes" onclick='changeMinute("+")'>
                                                <i class="iconfont">&#xe689;</i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        {if $if_predeposit || $if_rc_balance}
                        <div class="goods-times clearfloat">
                            {if $if_predeposit}
                            <div class="user-trip">
                                使用预存款
                            </div>
                            <div class="f switch-wrapper">
                                <label class="el-switch"> <input type="checkbox" name="pd_pay" id='pd_pay' value='1' checked="" onchange='showPassword()' /> <span class="el-switch-style"></span> </label>
                            </div>
                            {/if}
                            {if $if_rc_balance}
                            <div class="user-trip tr-sc">
                                使用充值卡
                            </div>
                            <div class="f switch-wrapper">
                                <label class="el-switch"> <input type="checkbox" name="rcb_pay" id='rcb_pay' value='1' checked="" onchange='showPassword()' /> <span class="el-switch-style"></span> </label>
                            </div>
                            {/if}
                            <div id='password_wrapper'>
                                <div class="user-trip tr-sc">
                                    支付密码
                                </div>
                                <div class="user-from-name">
                                    <input class="cus-input" type="password" style="border:1px solid #D9D9D9;padding-right:0" placeholder="请输入支付密码" name='password' id='password' />
                                </div>
                            </div>
                        </div>
                        {/if}
                        <div class="user-remark">
                            <div class="user-trip">
                                备注
                            </div>
                            <div class="user-remark-con">
                                <textarea name='o2o_fuwu_order_remark' placeholder="请输入备注信息" maxlength="150"></textarea>
                                <div class="mark-size" style='display: none'>
                                    <span>0</span>/150
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="create-right-con" style="top: 0px;">
                <div class="cal-fee">
                    <div class="user-mess-title">
                        <h3>订单费用</h3>
                    </div>
                    <div id='order_amount_wrapper'></div>
                    <div class="pay-style">
                        <div class="l-semicircle"></div>
                        <div class="r-semicircle"></div>

                        <div class="to-submit" onclick='submitForm()'>
                            去支付
                        </div>
                    </div>
                    <div class="dowload-app clearfloat">
                        <img src="" class="left-ding" />
                        <img src="" class="right-ding" />
                        <p class="d-title">使用手机下单更方便快捷</p>
                        <div class="d-code">
                            <div class="left-code f">
                                <img src="{$Think.HOME_SITE_URL}/qrcode?url={$Think.config.ds_config.h5_site_url}" />
                                <p>扫描进入手机端</p>
                            </div>
                            <div class="right-code f">
                                <img src="{$Think.UPLOAD_SITE_URL}/{$Think.ATTACH_COMMON}/{$Think.config.ds_config.site_logowx}" />
                                <p>关注微信公众号</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type='hidden' name='o2o_fuwu_goods_id' value='{$Request.param.o2o_fuwu_goods_id}'>
    <input type='hidden' name='spec_quantity_list' id='spec_quantity_list'>
</form>    
<script src="{$Think.PLUGINS_SITE_ROOT}/template.min.js"></script>
<script>
    var layer_index
    var spec_quantity_list=new Array()
    spec_quantity_list[0]={quantity:1,o2o_fuwu_goods_spec_id:"{$o2o_fuwu_goods_spec_default[0]['o2o_fuwu_goods_spec_id']}",o2o_fuwu_goods_spec_name:"{$o2o_fuwu_goods_spec_default[0]['o2o_fuwu_goods_spec_name']}",o2o_fuwu_goods_spec_price:"{$o2o_fuwu_goods_spec_default[0]['o2o_fuwu_goods_spec_price']}"}
    {if !empty($o2o_fuwu_goods_spec_added)}
    {foreach name='o2o_fuwu_goods_spec_added' item='spec' key='index'}
    spec_quantity_list[{$index}+1]={quantity:0,o2o_fuwu_goods_spec_id:"{$spec['o2o_fuwu_goods_spec_id']}",o2o_fuwu_goods_spec_name:"{$spec['o2o_fuwu_goods_spec_name']}",o2o_fuwu_goods_spec_price:"{$spec['o2o_fuwu_goods_spec_price']}"}
    {/foreach}
    {/if}    
    $(function(){
        setTime()
        calculAmount()
        $(document).bind('click',
        function(e) {
            var e = e || window.event; //浏览器兼容性 
            var elem = e.target || e.srcElement;
            while (elem) { //循环判断至跟节点，防止点击的是div子元素 
                if (elem.className && (elem.className.indexOf("select-weight-btn") != -1 || elem.className.indexOf("sel-time") != -1)) {
                    return;
                }
                elem = elem.parentNode;
            }
            closeSelect()
            
        })
    })
    function getAddress() {
        $.getJSON(HOMESITEURL + "/Memberaddress/index?ajax=1&o2o_errand_type=0", function (res) {
            if (res.code != 10000) {
                layer.msg(res.message)
            } else {
                var data = res.result
                layer_index = layer.open({
                    type: 1,
                    title: '更换地址',
                    closeBtn: 0, //不显示关闭按钮
                    anim: 2,
                    shadeClose: true, //开启遮罩关闭
                    content: template.render('address_list_html', data)
                })
            }
        })
    }
    function addAddress() {
        layer.close(layer_index)
        window.open(HOMESITEURL + "/Memberaddress/add?close=1&from=o2o_fuwu&o2o_errand_type=0")
    }
    function selectAddress(address) {
        $('#address_id').val(address.id)
        $('#o2o_fuwu_order_lng').val(address.lng)
        $('#o2o_fuwu_order_lat').val(address.lat)
        $('#o2o_fuwu_order_name').val(address.name)
        $('#o2o_fuwu_order_address').val(address.address)
        $('#o2o_fuwu_order_phone').val(address.phone)
        layer.close(layer_index)
    }
    function calculAmount() {
        var default_price=0
        var added_price=0
        var total_price=0
        for(var i in spec_quantity_list){
            if(i==0){
                default_price=spec_quantity_list[i].o2o_fuwu_goods_spec_price*spec_quantity_list[i].quantity
            }else{
                added_price+=spec_quantity_list[i].o2o_fuwu_goods_spec_price*spec_quantity_list[i].quantity
            }
        }
        total_price=(default_price+added_price).toFixed(2)
        default_price=default_price.toFixed(2)
        added_price=added_price.toFixed(2)
        $('#order_amount_wrapper').html(template.render('order_amount_html',{done:true,result:{default_price:default_price,added_price:added_price,total_price:total_price}}))
    }
    function changeWeight(index,type){
        var i=parseInt($('#quantity_'+index).val())
        if(isNaN(i) || i<((index==0)?1:0)){
            layer.msg('数量设置错误')
            return
        }
        if(type=='-'){
            if(i==((index==0)?1:0)){
                return
            }
            i--
        }else{
            i++
        }
        $('#quantity_'+index).val(i)
        spec_quantity_list[index]['quantity']=i
        calculAmount()
    }
    function closeSelect() {
        $('i.img-rotate').removeClass('img-rotate')
        $('.select-block').hide()
    }
    function openGoods(){
        closeSelect()
        $('.type-m').find('i').addClass('img-rotate')
        $('#goods_list').show()
    }
    function selectGoods(spec){
        spec['quantity']=spec_quantity_list[0]['quantity']
        spec_quantity_list.splice(0, 1, spec)
        $('#default_spec_info').val(spec.o2o_fuwu_goods_spec_name+'（'+spec.o2o_fuwu_goods_spec_price+'元/'+spec.o2o_fuwu_goods_spec_unit+'）')
        calculAmount()
    }
    function openTime(){
        closeSelect()
        $('.time-m').find('i').addClass('img-rotate')
        $('#time_list').show()
    }
    function changeMinute(type){
        var minute=parseInt($('#appoint-minutes').attr('data-value'))
        if(type=='-'){
            if(minute==28800){
                layer.msg('超过可预约时间')
                return
            }
            minute=28800
        }else{
            if(minute==50400){
                layer.msg('超过可预约时间')
                return
            }
            minute=50400
        }
        $('#appoint-minutes').attr('data-value',minute)
        setTime()
    }
    function changeHour(type){
        var start_hour=parseInt($('#appoint-hours').attr('data-start'))
        var hour=parseInt($('#appoint-hours').attr('data-value'))
        if(type=='-'){
            if(hour<=start_hour){
                layer.msg('超过可预约时间')
                return
            }
            hour-=86400
        }else{
            if(hour>=(start_hour+86400*6)){
                layer.msg('超过可预约时间')
                return
            }
            hour+=86400
        }
        $('#appoint-hours').attr('data-value',hour)
        setTime()
    }
    function setTime(){
        var minute=parseInt($('#appoint-minutes').attr('data-value'))
        var hour=parseInt($('#appoint-hours').attr('data-value'))
        var temp=new Date()
        temp.setTime((hour+minute)*1000)
        $('#o2o_fuwu_order_appointment_time').val(temp.getFullYear()+'-'+(temp.getMonth()+1)+'-'+temp.getDate()+' '+temp.getHours()+':00')
        var str,str1,str2
        var week_array={:json_encode($week_array)};
        var date=new Date()
        date.setTime(hour*1000)
        str1=strPad(date.getMonth()+1,2)+'月'+strPad(date.getDate(),2)+'日'+'（'+week_array[date.getDay()]+'）'
        str2=(minute==28800)?'上午':'下午'
        str=str1+str2
        $('#appointment_time').text(str)
        $('#appoint-hours').text(str1)
        $('#appoint-minutes').text(str2)
    }
    function strPad(num, n) {
        return (Array(n).join(0) + num).slice(-n);
    }
    function showPassword(){
        if(!$('#rcb_pay').is(':checked') && !$('#pd_pay').is(':checked')){
            $('#password_wrapper').hide()
        }else{
            $('#password_wrapper').show()
        }
    }
    function submitForm(){
        if(!$('#o2o_fuwu_order_appointment_time').val()){
            layer.msg('请选择预约时间')
            return
        }
        if(($('#rcb_pay').is(':checked') || $('#pd_pay').is(':checked')) && !$('#password').val()){
            layer.msg('请输入支付密码')
            return
        }
        $('#spec_quantity_list').val(JSON.stringify(spec_quantity_list))
        var _form = $("#member_o2o_errand_form");
        $.ajax({
            type: "POST",
            url: _form.attr('action'),
            data: _form.serialize(),
            dataType:"json",
            success: function (res) {
                if(res.code!=10000){
                    layer.msg(res.message)
                }else{
                    window.location.href=HOMESITEURL + "/Buy/o2o_fuwu_pay?pay_sn=" + res.result.pay_sn
                }
            }
        })
    }
</script>
<script type="text/html" id="order_amount_html">
    <%if(!done){%>    
    <div class="cafee-default"> 
        <img src="" /> 
        <p>请完善订单信息</p> 
    </div> 
    <%}else{%>
    <div class="user-fee-detail"> 
        <div class="user-pay clearfloat"> 
            <div class="fee-all"> 
                <span class="pay-trip">默认服务费:</span> 
                <span><%=(result.default_price)%>元</span> 
            </div> 
        </div> 
        <%if(result.added_price>0){%>
        <div class="user-pay clearfloat"> 
            <div class="fee-all"> 
                <span class="pay-trip">增值服务费:</span> 
                <span><%=(result.added_price)%>元</span> 
            </div> 
        </div> 
        <%}%>
      
        <div class="user-pay clearfloat"> 
            <div class="fee-all"> 
                <span class="pay-trip">您需支付:</span> 
                <span class="pay-fee"><%=(result.total_price)%>元</span> 
            </div> 
        </div> 
    </div>
    <%}%>                
</script>
<script type="text/html" id="address_list_html">
    <div class="address_list">    
        <%for(var i in address_list){ var item=address_list[i];%>    
        <div class="address_item" onclick="selectAddress({id:<%=item.address_id%>,lng:'<%=item.address_longitude%>',lat:'<%=item.address_latitude%>',name:'<%=item.address_realname%>',address:'<%=item.address_detail%>',phone:'<%=item.address_mob_phone%>'})">
            <div class="address_title"><span class="address_name"><%=item.address_realname%></span><span class="address_phone"><%=item.address_mob_phone%></span></div>
            <div class="address_content"><%=item.area_info%><%=item.address_detail%></div>
        </div>
        <%}%>
        <div class="to-submit" onclick="addAddress()">新增</div>
    </div>
</script>
{/block}